<extend name="_Layout/main"/>
<block name="main">
      <script type="text/javascript">
             
                    $(".col-nav ul li").eq(2).addClass("active");
                
     </script>
            
            <div class="col-md-12 col-xs-12 pro-detail">
                <div class="col-md-4 col-xs-12 p-0">
                    <div class="product-info-img c-e-i d-img c-h-i fleft gallery clearfix">
                        <a class="div_con" rel="prettyPhoto" href="{$clothes.img|get_cover}"><img src="{$clothes.img|get_cover}"></a>
                    </div>
                    <div class="product-list-con">
                        <volist name='info_img' id='vo'>
                             <div class="c-h-i product-list-img div_con"><img src="{$vo.id|get_cover}"></div>
                        </volist>
                    </div>

<!--              <div class="col-md-12 text-center s-c"><span>收藏:121</span><span>銷量:12</span></div>-->
        <!-- JiaThis Button BEGIN -->
        <div class="jiathis_style_32x32">
                <a class="jiathis_button_fb"><i class="fa fa-facebook e-ico"></i></a>
                <a class="jiathis_button_weixin"><i class="fa fa-weixin e-ico"></i></a>
<!--                <a class="h-btn"><span><i class="fa fa-heart-o e-ico"></i></span></a>-->


        </div>

<!-- JiaThis Button END -->
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="col-md-12 detail-border"><h4>{$clothes.name}</h4></div>
                    <div class="col-md-12 detail-border">
                        <div class="col-md-3 p-0">原價：</div>
                        <div class="col-md-9 p-0">
                             <div><empty name="clothes.discount"><span class="p-price" id="oldprice">${$clothes.price}</span><else /> <span class="old-price">${$clothes.price}</span></empty></div>
                            
                         </div>
                        <div class="col-md-3 p-0">活動打折：</div>
                        <div class="col-md-9 p-0">
                            <div><empty name="clothes.discount">無<else /> <span class="p-price" id='newprice'>${$clothes.discount}</empty> </span></div>
                            
                         </div>
                        
                    </div>
                      <div class="col-md-12 detail-border">
                        <div class="col-md-3 p-0">商品描述：</div>
                        <div class="col-md-9 p-0">{$clothes.describe}</div>
                    </div>
                      <div class="col-md-12 detail-border">
                        <div class="col-md-3 p-0">狀態：</div>
                        <div class="col-md-9 c-b p-0">
                            <span class="c-p-2">SALE</span>
                         </div>
                    </div>
                     <div class="col-md-12 detail-border">
                        <div class="col-md-3 p-0">庫存：</div>
                        <div class="col-md-9 p-0">
                             <if condition="$clothes.stock elt 0">
                                  無貨
                                  <else />
                                  {$clothes.stock}
                             </if>
                        </div>
                    </div>
                     <div class="col-md-12 detail-border">
                        <div class="col-md-3 p-0">類別：</div>
                        <div class="col-md-9 p-0">
<!--                             <if condition="$clothes.type eq 1">男裝
                             <elseif condition="$clothes.type eq 2" />女裝
                             <elseif condition="$clothes.type eq 3" />兒童裝
                             <elseif condition="$clothes.type eq 4" />老人裝
                             </if>-->
                             {$type.title}
                        </div>
                    </div>
                     
                      <div class="col-md-12 col-sm-12 col-xs-12 c-pad">
                        <div class="col-md-3 col-xs-12 p-0">商品顏色：</div>
                        <div class="col-md-9 col-xs-12 p-0">
                           
                           <div class="dropdown p-dr">
                                <i class="fa fa-check c-check"></i>
                                <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <span class="dr-name" id="color">請選擇</span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dLabel">
                                     <volist name="color" id="vo">
                                    <li><span>{$vo}</span></li>
                                     </volist>
                                </ul>
                                  <i class="fa fa-angle-down dr-d"></i>
                          </div>
                         
                       </div>
                    </div>
                     <div class="col-md-12 col-sm-12 col-xs-12 c-pad">
                        <div class="col-md-3 col-xs-12 p-0">商品尺寸：</div>
                        <div class="col-md-9 col-xs-12 p-0">
                            <div class="dropdown p-dr">  
                            <i class="fa fa-check c-check"></i>
                            <select id="size">
                                 <volist name='size' id='vo'>
                                <option>{$vo}</option>
                                </volist>
                            </select>
                            <i class="fa fa-angle-down dr-d"></i>
                            </div>  
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                         
                              <if condition="$clothes.stock elt 0">
                               <div class="d-shop" style="background: #DDD; cursor: ">立即購買</div>
                                  <else />
                                  <div class="btn-primary d-s" data-toggle="modal" data-target="#myModal1">立即購買</div>
                             </if>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                         
                          <if condition="$clothes.stock elt 0">
                               <div class="d-shop" style="background: #DDD; cursor: ">加入購物車</div>
                                  <else />
                                  <div class="d-shop add-shop">加入購物車</div>
                             </if>
                    </div>
                </div>
                <div class="col-md-2 col-xs-12 c-simple">
                    <div>
                         <span>同類別推薦</span><span class="swich" id='changeBtn'>換一批</span>
                    </div>
                     <span id='box'>
                     <volist name="recommend" id="vo">
                    <div class="simpli-li col-md-12 col-sm-6 col-xs-6 p-0">
                        <div class="h-150 c-e-i c-h-i"><a class="div_con" href="{:U('Home/Index/detail',array('id'=>$vo['id']))}"><img src="{$vo.img|get_cover}"></a></div>
                        <p>{$vo.name}</p>
                        <p>原價：${$vo.price}<br><span>優惠價：<if condition="$vo.discount ELT 0">無<else />${$vo.discount}</if></span></p>
                    </div>
                     </volist>
                     </span>    
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="detail-border"><h3>商品詳細</h3></div>
                    
                    <div class="col-md-12 d-d-img"><br><br>{$clothes.info}</div>
                   
                </div>
            </div> 

         
        <!-- sell Modal -->
        <form action="{:U('Home/Index/addone')}" method="post">
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">选购服装</h4>
      </div>
      <div class="modal-body">
          <div class="col-md-3 col-xs-4 p-0 h-100 c-e-i"><img src="{$clothes.img|get_cover}"></div>
          <div class="col-md-9 col-xs-8 p-0">
              <div class="col-md-10 col-xs-8 c-p-li">
                  <div class="col-md-8 p-0">  
                  <p>{$clothes.name}</p>
                  <p>$
                  <empty name="clothes.discount"><input class="c-price oprice"  value="{$clothes.price}" readonly="readonly"><else /><input class="c-price oprice"  value="{$clothes.discount}" readonly="readonly"></empty></p>
                  </div>
                   <div class="col-md-4 p-0 shop-num">
                  <p>数量：</p>
                  <a class="c-left"><</a>
                  <input class="c-num onum"   value="1" readonly="readonly">
                  <a class="c-right">></a>
                  <p class="c-n-p">共计:$<input class="num-price" value="26" readonly="readonly"></p>
              </div>
             
                 
              </div>
              <div class="col-md-2 col-xs-4 d-s addone">立即購買</div>
          </div>
               <div class="col-md-6 col-sm-6 col-xs-6 c-pad">
                        <div class="col-md-4 col-sm-4 col-xs-12 p-0">商品顏色：</div>
                        <div class="col-md-8 col-sm-8 col-xs-12">
                           
                           <div class="dropdown p-dr">
                                <i class="fa fa-check c-check"></i>
                                <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="dr-name ocolor">請選擇</span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dLabel">
                                    <volist name="color" id="vo">
                                    <li><span>{$vo}</span></li>
                                     </volist>
                                </ul>
                                  <i class="fa fa-angle-down dr-d"></i>
                            </div>
                         
                         </div>
                    </div>
                   <div class="col-md-6 col-sm-6 col-xs-6 c-pad">
                        <div class="col-md-4 col-sm-4 col-xs-12 p-0">商品尺寸：</div>
                        <div class="col-md-8 col-xs-12 col-sm-8">
                           <div class="dropdown p-dr">  
                            <i class="fa fa-check c-check"></i>
                            <select class='osize'>
                               <volist name='size' id='vo'>
                                <option>{$vo}</option>
                                </volist>
                            </select>
                            <i class="fa fa-angle-down dr-d"></i>
                           </div>  
                         </div>
                    </div>
      </div>
     
    </div>
  </div>
</div>
        </form>
        <script>
             //同類推薦
             $("#changeBtn").click(function(){
                  $.post("{:U('Home/Index/recommend')}",{type:"{$clothes.type}"},function(data){
//                       $("#box").html(data);
                    var str="";
                    for(var i=0;i<data.id.length;i++){
                        str+="<div class='simpli-li col-md-12 col-sm-6 col-xs-6 p-0'><div class='h-150 c-e-i c-h-i\'><a href='Home/Index/detail/id/"+data.id[i]+"'><img src='"+data.img[i]+"' style='width: 100%;'></a></div><p>"+data.name[i]+"</p><p>原價：$"+data.price[i]+"<br><span>優惠價："+data.discount[i]+"</span></p></div>";
                    }
                    $("#box").html(str);
                  })
             })
             //加入購物車
             $(".add-shop").click(function(){
                  var color=$("#color").text();
                  var size=$("#size").val();
                  var price="{$clothes.discount}";
                  if(price==""){
                       price="{$clothes.price}";
                  }else{
                       price="{$clothes.discount}";
                  }
                  
                  ;
                  $.post("{:U('Home/Index/addcart')}",
                  {
                       id:"{$clothes.id}",
                       name:"{$clothes.name}",
                       color:color,
                       size:size,
                       price:price,
                       img:"{$clothes.img}"
                  },function(data){
                       $(".prompt").find("h3").html(data);
                       if(data=="加入購物車成功！"){
                            setInterval(afr,1000);
                       }
                       
                  })
             })
             
             $(".addone").click(function(){
                  var color=$(".ocolor").text();
                  var size=$(".osize").val();
                  var num=$(".onum").val();
                  var price=$(".oprice").val();
                  $.post("{:U('Home/Index/addone')}",
                  {
                       id:"{$clothes.id}",
                       name:"{$clothes.name}",
                       color:color,
                       size:size,
                       num:num,
                       price:price,
                       img:"{$clothes.img}"
                  },function(data){
                        $('.prompt-bg,.prompt').fadeIn();
                       $(".prompt").find("h3").html(data);
                       if(data=="下單成功，祝你購物愉快！"){
                            setInterval(afr,1000);
                       }
                       
                  })
             })
             
             
             
             
             
              function afr(){
                    window.location.reload();
                 }
        </script>
        </block>